<!doctype html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
        <title>用户注册</title>
        <style th:inline="css">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            body {
                background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
            }

            .form-register {
                max-width: 550px;
                background-color: #fff;
                margin: 0 auto;
                padding: 15px 40px 50px;
                border: 1px solid #e5e5e5;
                border-radius: 10px;
            }

            .form-register .form-signin-heading {
                margin-bottom: 30px;
            }

            .form-register input, .form-register {
                margin-bottom: 20px;
            }

            .form-register .form-control {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="login-content mx-auto mt-5">
                    <div id="form-register" class="form-register shadow">
                        <h2 class="form-signin-heading text-center"><i class="fas fa-user"></i> 用户注册 </h2>
                        <div class="form-group">
                            <label class="col-form-label">用户名</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="请输入用户名"
                                   required autofocus autocomplete="off" pattern="[A-Za-z0-9]{6,30}">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="请输入 Email"
                                   required>
                        </div>

                        <div class="form-group">
                            <label class="col-form-label">密码</label>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码" required
                                   pattern="[A-Za-z0-9]{6,30}">
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">确认密码</label>
                            <input type="password" class="form-control" id="password-verify" placeholder="请再次输入密码"
                                   required pattern="[A-Za-z0-9]{6,30}">
                        </div>
                        <div>
                            <label class="col-form-label">验证码</label>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="captchaCode" placeholder="请输入验证码"
                                           required>
                                </div>
                                <div class="col-md-6">
                                    <img id="captcha" th:src="@{/captcha/generate}"
                                         src="../../../static/img/login-bg.jpg"
                                         alt="captcha" width="100px" height="38px">
                                    <a id="captchaRefresh" href="javascript:void(0)"
                                       class="btn btn-link text-decoration-none">
                                        <i class="fas fa-sync"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <button id="login-btn" class="btn btn-lg btn-primary btn-block">注册</button>
                        <div class="text-center">
                            <a th:href="@{/login}" href="#" class="btn btn-link text-decoration-none">已有帐号，去登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/static/js/bootstrapQ.js}" src="../../static/js/bootstrapQ.js"></script>
        <script th:inline="javascript">
            $(function () {
                /* 验证码刷新 */
                let captcha = $('#captcha');
                let captchaRefresh = $('#captchaRefresh');
                // 注释是为了不让编辑器报错
                let imgSrc = /*[[@{/captcha/generate}]]*/'';
                captcha.click(function () {
                    captcha.prop('src', imgSrc);
                });
                captchaRefresh.click(function () {
                    captcha.prop('src', imgSrc);
                });
            });

            /* 用户注册 */
            $('#login-btn').click(function () {
                let req = {};
                req.name = $.trim($('#name').val());
                req.email = $.trim($('#email').val());
                req.password = $.trim($('#password').val());
                req.captcha = $.trim($('#captchaCode').val());
                let passwordVerify = $.trim($('#password-verify').val());

                if (req.name.length === 0) {
                    bootstrapQ.msg({msg: '用户名不得为空!', type: 'warning', time: 2000});
                    return;
                }
                if (req.password !== passwordVerify) {
                    bootstrapQ.msg({msg: '俩次密码不相同!', type: 'warning', time: 2000});
                    return;
                }
                $.ajax({
                    url: /*[[@{/register.do}]]*/'',
                    method: 'POST',
                    data: JSON.stringify(req),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            // alert(resp.message);
                            bootstrapQ.alert({
                                title: '提示',
                                msg: resp.message,
                                backdrop: 'true'
                            }, function () {
                                // 刷新验证码
                                $('#captcha').click();
                                // 清空用户输入
                                $('#captchaCode').val('');
                                // 跳转到登录页面
                                location.href = /*[[@{/login}]]*/'';
                            });
                        } else {
                            bootstrapQ.msg({msg: resp.message, type: 'warning', time: 2000});
                            // 刷新验证码
                            $('#captcha').click();
                            // 清空用户输入，并且获得焦点
                            $('#captchaCode').val('').focus();
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            })
        </script>
    </body>
</html>
